<html>
	<!-- Test Draggable + Selectable -->
	<head>
		<title>fuchsia test</title>
		<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
		<script src="js/jquery-ui-personalized-1.5.2.min.js"></script>
		<script src="js/jquery.domec.min.js" type="text/javascript"></script>
		<script src="js/olive.js" type="text/javascript"></script>
		<style type="text/css">
			.item { background-color: #cfc; border: 1px solid blue; width: 120px; margin: 5px; }
			.ui-selected { background-color: #f99; }
			.ui-selecting { background-color: #fee; }
			#test1 { cursor: default; }
		</style>
	</head>
	<body id="body">
		<ul id="test1">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
		</ul>
		<a href="#" onclick="addNote();">add note</a>
		<div id="notes">
			<div class="item" id="n0"><p>0</p></div>
			<div class="item" id="n1"><p>1</p></div>
		</div>
		
		<script type="text/javascript">
			var i=5;
			function newId() {
				return "n" + Math.ran(100, 999);
			}

			function addNote() {
				this.x = 0;
				this.y = 0;
				var i = "" + Math.ran(100, 999);
				var p = $.create("p", {}, [ i ]);
				var div = $.create("div", { "class": "item", "id": newId() }, [ p ]);
				$("#notes").append(div);
				
				var initPos = false;
				var collection = false;		
				$("div#notes").selectable({});

				$('div.item').draggable({
					grid: [10, 10],
					// opacity: 0.5,
					helper: 'original',
					start: function (e, ui) {
						if ($(this).is('div.ui-selected')) {
							initPos = { x: $(this).css('left'), y: $(this).css('top') };
							collection = jQuery('.ui-selected:visible').not(this);
							if (collection.size() == 0) {
								initPos = false;
								collection = false;
							}
						}
					},
					drag: function (e, ui) {
						if (collection) {
							var x = ui.position.left;
							var y = ui.position.top;
							collection.each( function() {
								$(this).css({left: x, top: y+30});
							});
							this.x = x;
							this.y = y;
							initPos = {x: x, y: y};
						}
					},
					stop: function (e, ui) {
						initPos = false;
						collection = false;	
					}
				});
				$("div#notes").selectable({});
			}
			
			function init() {
				$("div#notes").selectable({});
				addNote();
				addNote();
			}
			
			$(window).bind("load", init);

		</script>
	</body>
</html>
